<template>
  <div>
    <a-modal 
      :open="open" 
      title="病虫害列表" 
      @ok="handleOk"
      @cancel="cancel"
    >
      <a-table
        :data-source="data"
        :columns="columns"
        :row-selection="{onChange: insectSelect}"
      />
      <template #bodyCell="{ column, index }">
        <template v-if="column.dataIndex === 'index'">
          {{ index + 1}}
        </template>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
defineProps(['open', 'keys'])
const emit = defineEmits(['update:open', 'cancel', 'update:keys'])

const data = [
  {
    key: 1,
    name: '稻纵卷叶螟'
  },
  {
    key: 2,
    name: '稻飞虱'
  },
  {
    key: 3,
    name: '稻纹枯病'
  },
  {
    key: 4,
    name: '小麦赤霉病'
  },
  {
    key: 5,
    name: '小麦蚜虫'
  },
]
const columns = [
  { title: '名称', dataIndex: 'name', align: 'center' }
]
const handleOk = () => {
  emit('update:open', keys)
}
const cancel = () => {
  emit('cancel')
}
const insectSelect = (selectedRowKeys) => {
  emit('update:keys', selectedRowKeys)
}
</script>